import React, { Component, useState } from 'react';
import { Button, Form, Input, NavBar, Toast, Dialog, Space } from 'antd-mobile'
import * as service from "../api/index"
import styles from '../styles/yanjing.scss'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'

class Register extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            visible: false,
            setVisible: true,
            zhanghao: "",
            mima: "",
            twomima: "",
            yanzhengma: '正在发送...',
            time: 60,
            Fs: true,
            tanchuang: false
        }
    }

    //返回
    fanhui() {
        console.log("77")
        this.props.history.go(-1)
    }
    //点击眼睛1打开
    kai() {

        console.log(this)
        this.visible = true
        this.setState({ visible: true })
    }
    //点击眼睛1关闭
    guan() {

        this.visible = false
        this.setState({ visible: false })
    }
    //获取账号
    zhanghao(value) {
        console.log(value)
        //   this.zhanghao=value
        this.setState({ zhanghao: value })
    }
    //获取密码
    mima(value) {
        console.log(value)
        this.setState({ mima: value })
    }
    //获取验证码
    yanzhengma(value) {
        console.log(value)
    }

    //发送验证码

    async yanzhengma() {
        var res = await service.user_dosendmsgcode()
        console.log(res)
        if (res.data.code == 200) {
            this.setState({ yanzhengma: res.data.data })
        }
    }

    //60秒验证
    async yanzheng() {
        this.setState({ Fs: false })
        if (this.state.time == 60) {
            this.yanzhengma()
        }
        clearInterval(this.timerid)
        this.timerid = setInterval(() => {
            this.state.time = this.state.time - 1

            this.setState({ time: this.state.time })

            if (this.state.time == 0) {
                this.state.time = 60
                this.setState({ time: this.state.time, yanzheng: "'正在发送...'" })
                clearInterval(this.timerid)
            }
        }, 1000)

    }

    yifasong() {
        Toast.show({
            content: '验证码已发送，请输入',
            position: 'top'
        })
    }


    //登录
    async denglu() {
        console.log(this.state.zhanghao,")))",this.state.mima)
        var res = await service.user_register({ tel: this.state.zhanghao, password: this.state.mima })
        console.log(res)
        this.props.history.push('/login')
      
    }
    render() {
        return (
            <div className='Login'>
                <div className='header'><NavBar onBack={() => { this.fanhui() }}>注册界面</NavBar></div>
                <>
                    <Form layout='horizontal' mode='card'>
                        <Form layout='horizontal'>
                            <Form.Item label='用户名' name='username' rules={[{ required: true }]}>
                                <Input

                                    onChange={(value) => {
                                        this.setState({ zhanghao: value })
                                        console.log(this.state.zhanghao)
                                    }}
                                    placeholder='请输入用户名' clearable />
                            </Form.Item>
                            <Form.Item

                                label='密码'
                                name='password'
                                rules={[{ required: true }]}
                                setFieldsValue={this.state.mima}
                                extra={
                                    <div className={styles.eye}>
                                        {!this.visible ? (
                                            <EyeInvisibleOutline onClick={() => { this.kai() }} />
                                        ) : (
                                            <EyeOutline onClick={() => { this.guan() }} />
                                        )}
                                    </div>
                                }
                            >
                                <Input
                                    placeholder='请输入密码'
                                    clearable
                                    type={this.visible ? 'text' : 'password'}
                                    onChange={(value) => {
                                        this.mima(value)
                                    }}
                                />
                            </Form.Item>
                            <Form.Item

                                label='确认密码'
                                name='twopassword'
                                rules={[{ required: true }]}
                                extra={
                                    <div className={styles.eye}>
                                        {!this.visible ? (
                                            <EyeInvisibleOutline onClick={() => { this.kai() }} />
                                        ) : (
                                            <EyeOutline onClick={() => { this.guan() }} />
                                        )}
                                    </div>
                                }
                            >
                                <Input
                                    setFieldsValue={this.state.twomima}
                                    placeholder='确认密码'
                                    clearable
                                    type={this.visible ? 'text' : 'password'}
                                    onChange={(value) => {
                                        this.mima(value)
                                    }}
                                />
                            </Form.Item>
                           





                        </Form>
                    </Form>

                </>
                
                
                <Button block color='primary' size='large' onClick={() => { this.denglu() }}>
                    注册
                </Button>
                



            </div >


        );
    }
}

export default Register;